<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="我的社圈" autoBack>
			</u-navbar>
		</view>


		<view class="con-body wrap" style="background-color: #f8f8f8;">

			<view class="main-service uni-cell-90" style="margin-top: 35rpx;">
				<view class="iconType1">
					<u-cell-group :border="false">
						<view class="card-head">
							<u-cell :border="false">
								<view slot="icon">
									<u-avatar mode="aspectFill" :src="user.avatar" defaultUrl="http://meiju.cnlhjt.com/upload/20220822/f1477fb46c8a9013f44d71cbff9ced6e.png" size="60"></u-avatar>
								</view>
								<view slot="label" style="margin-left: 10rpx;">
									<view>
										<text style="font-size: 32rpx;">{{user.username}}</text>
									</view>
									<view v-if="user.type == 1"
										style="margin-top: 20rpx; font-size: 26rpx; color: #696969;">
										<text>业主</text>
									</view>
									<view v-else-if="user.type == 2"
										style="margin-top: 20rpx; font-size: 26rpx; color: #696969;">
										<text>家人</text>
									</view>
									<view v-else-if="user.type == 3"
										style="margin-top: 20rpx; font-size: 26rpx; color: #696969;">
										<text>租户</text>
									</view>
									<view v-else style="margin-top: 20rpx; color: #696969;">

										<text>访客</text>
									</view>
								</view>
							</u-cell>
						</view>

					</u-cell-group>
				</view>
				<view class="iconType">

					<view class="item" @click="myRelease">
						<view class="icon">
							<u-icon size="20" name="https://resourse.cnlhjt.com/upload/20220825/8da1f16424e6e4abae304d9b5be2fd3d.png"></u-icon>
						</view>
						我的发布
					</view>
					<view class="item" @click="myComment">
						<view class="icon">
							<u-icon size="20" name="https://resourse.cnlhjt.com/upload/20220825/5bcfc2e79cb73984b9dce168f4f6a652.png"></u-icon>
						</view>
						我的评论
					</view>
					<view class="item" @click="myForward">
						<view class="icon">
							<u-icon size="20" name="https://resourse.cnlhjt.com/upload/20220825/384417490c4ab17b1ca7831d95f842fc.png"></u-icon>
						</view>
						我的转发
					</view>
					<view class="item" @click="myGood">
						<view class="icon">
							<u-icon size="20" name="https://resourse.cnlhjt.com/upload/20220825/6f7f4e249db2e4af0fb9ff65ba48c28e.png"></u-icon>
						</view>
						我的点赞
					</view>
				</view>
				<view class="main-service u-flex u-row-between" style="margin-top: 20rpx;padding:0 20rpx; border-radius: 20rpx;">
					<view class="title" style="margin-bottom:10rpx;">
						我的活动
					</view>
					<view style="color: #999999; font-weight: 400;font-size: 28rpx;" @click="myActive">
						更多
						<view style="display: inline-block;">
							<u-icon style="display: inline-block" name="arrow-right" color="#999999" size="14"></u-icon>
						</view>
						
					</view>
				</view>
				<view style="background-color: #FFFFFF;margin-top: 1px;">
					<view>
						<u-tabs :list="tabs" lineColor="#0B868E" :current="current" @change="changeTabs">
						</u-tabs>
					</view>
					<view style="padding:20rpx;">
						<view class="a_list u-flex u-row-between" v-for="(item, index) in repairList" :key="index" @click="intoDetail(item.id)">
							<view class="a_left_con u-rela">
								<view class="a_title">
									<text>{{item.title}}</text>
								</view>
								<view class="a_sponsor">主办方：{{item.sponsor}}</view>
								<view class="a_address">活动地址：{{item.address}}</view>
								<view class="a_limit" v-if="item.limit == 0">参与人数：<text style="color:#0B868E;">{{item.join}}</text>/不限</view>
								<view class="a_limit" v-else>参与人数：<text style="color:#0B868E;">{{item.join}}</text>/不限</view>
								<view class="u-flex u-row-between" style="margin-top:20rpx;">
									<text class="a_time">{{item.time}}</text>
									<text class="a_free" v-if="item.free == 0">免费</text>
									<text class="a_free" v-else>￥{{item.price}}/人</text>
								</view>
								<view v-if="item.status == -1" class="a_status">
									<u-image width="120rpx" height="120rpx"
										src="https://resourse.cnlhjt.com/upload/20220825/23a08670c569a7ed00a0f6cc135c250b.png">
									</u-image>
								</view>
							</view>
							<image class="a_img" mode="aspectFill" :src="item.image"></image>
							
						</view>	
					</view>
					
					
					<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
					</u-empty>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { getInfo } from "@/service/userService.js";
	import {
		getMyActive
	} from "@/service/communitService.js";
	export default {
		data() {
			return {
				user: {},
				current: 0,
				tabs: [{
						name: '全部'
					},
					{
						name: '待参加'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消/已删除'
					}
				],
				repairList:[],
				showEmpty:false
			}
		},
		onLoad() {
			getInfo().then(this.getInfo);
			getMyActive().then(this.getMyActive);
		},
		methods: {
			getInfo(e){
				if(e.code ==200){
					this.user = e.result;
				}
			},
			getMyActive(e) {
				this.repairList = [];
				if (e.code == 200) {
					this.showEmpty = false;
					this.repairList = e.result;
				}else{
					this.showEmpty = true;
				}
			},
			changeTabs(e) {
				// console.log(e);
				this.current = e.index;
				let status;
				switch (this.current) {
					case 0:
						status = 99;
						break;
					case 1:
						status = 0;
						break;
					case 2:
						status = 1;
						break;
					case 3:
						status = -1;
						break;
				}
				getMyActive({
					status: status
				}).then(this.getMyActive);
			},
			intoDetail(id) {
				this.$u.route({
					url: 'pagesCommunity/mine/active-detail',
					params: {
						id: id
					}
				})
			},
			myRelease() {
				this.$u.route({
					url: "/pagesCommunity/mine/release",
					params: {}
				})
			},
			myComment() {
				this.$u.route({
					url: "/pagesCommunity/mine/comment",
					params: {}
				})
			},
			myForward() {
				this.$u.route({
					url: "/pagesCommunity/mine/forward",
					params: {}
				})
			},
			myGood() {
				this.$u.route({
					url: "/pagesCommunity/mine/good",
					params: {}
				})
			},
			myActive() {
				this.$u.route({
					url: "/pagesCommunity/mine/active",
					params: {}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.main-service {
		background-color: transparent;
		box-shadow: none;
	}
	
	.main-service .title {
		padding-left: 0;
		background-position: 0% 85%;
	}
	.wrap {
		width: 100%;
		margin-left: 0%;
		margin-bottom: 44rpx;
	}

	.card-head {
		border-radius: 20rpx;
	}

	.iconType1 {
		display: flex;
		padding: 10rpx 20rpx;
		background-color: #fff;
		// box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		justify-content: space-between;
		
	}

	.iconType {
		display: flex;
		padding: 30rpx 60rpx;
		background-color: #fefefe;
		// box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		justify-content: space-between;
		border-top:1rpx solid #f8f8f8;
	}

	.icon {
		height: auto;
		margin-bottom: 10rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
	}
	.a_list{
		padding:15rpx 10rpx;
		border-bottom:1rpx solid #ddd;
		.a_left_con{
			width:58%;
			.a_title{
				margin-bottom:20rpx;
			}
			.a_title text{
				font-size: 22rpx; font-weight: 600; padding: 10rpx 22rpx; color: #fff; 
				font-family: Arial, Helvetica, sans-serif;
				background-image: url('https://resourse.cnlhjt.com/upload/20220825/605402e1cc43dd5e1964b57f5ea66b8c.png');
				background-size: 100% 100%;
			}
			.a_sponsor,.a_address,.a_limit{
				font-size: 22rpx; color: #666;
				margin-top:10rpx;
			}
			.a_time{
				font-size: 24rpx;color:#82848A;
			}
			.a_free{
				font-size: 30rpx;color: red;font-weight: bold;
			}
		}
		.a_img{
			width:40%;
			height:240rpx;
			border-radius: 20rpx;
		}
		.a_status{
			position: absolute;
			top:0rpx;
			right:20rpx;
		}
	}
</style>
